<template>
  <div id="scorebox">
    <van-collapse v-model="activeName" accordion>
      <van-collapse-item
          v-for="(item, index) in courseItems"
          :key="index"
          :name="item.name"
      >
        <template #title>
          <div class="title-with-icon">
            <img :src="pngIcon" alt="PNG Icon" class="icon png-icon" />
            <img :src="item.iconPath" alt="Icon" class="icon" />
            <span>{{ item.title }}</span>
          </div>
        </template>
        <div class="collapse-box">
          <van-collapse v-model="item.activeSubName" accordion>
            <van-collapse-item
                v-for="(subItem, subIndex) in item.subItems"
                :key="subIndex"
                :name="subItem.name"
            >
              <template #title>
                <div class="sub-title-with-icon">
                  <img :src="subItem.iconPath" alt="Icon" class="icon sub-item-icon" />
                  <span>{{ subItem.title }}</span>
                </div>
              </template>
              <div class="sub-item-content">
                <div v-if="subItem.intro">
                  <p><strong>简介：</strong>{{ subItem.intro }}</p>
                </div>
                <div v-if="subItem.goals && subItem.goals.length">
                  <p><strong>目标：</strong>{{ subItem.goals }}</p>

                </div>
                <div v-if="subItem.tasks && subItem.tasks.length">
                  <p><strong>任务点：</strong></p>
                  <ul class="task-list">
                    <li v-for="task in subItem.tasks" :key="task">
                      {{ task }}
                    </li>
                  </ul>
                </div>
              </div>
            </van-collapse-item>
          </van-collapse>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>


<script>
import { Collapse, CollapseItem } from 'vant';
import icon4 from '/public/icons/1.svg';
import pngIcon from '/public/img/下载.png';

export default {
  data() {
    return {
      activeName: '',
      icon4,
      pngIcon,
      courseItems: [
        { title: '前端框架技术快速入门',
          iconPath: '/public/icons/1.svg',
          activeSubName: '', // 用于控制子折叠的激活状态
          subItems: [
            {
              title: 'Vue3开发初体验',
              name: 'sub1',
              intro: '参考官网教程，熟悉Vue3的各个知识点，使用Vue编写一个筒单的todolist项目，并进行打包发布压缩上传。不能在线正常浏览网页效果者不得分！目标：掌握Vue开发的基本流程。',
              tasks:
                  ['参考Vue官方教程https://cn.vuejs.org/guide/quick-start.html的指引，使用基于Vite工具搭建Vue3前端项目，输入命令：npm create vue@latest，熟悉Vue项目的目录结构和每个文件的作用，然后使用npm命令安装依赖，掌握利用npm运行和打包项目的基本命令，并将发布后的文件部署在本地的静态服务器上。利用网络搜索引擎查询Git的相关知识，利用Git把刚刚新建的Vue项目部署到远程仓库中（建议使用码云https://gitee.com/），熟悉Git的各种命令操作，熟悉Visual Studio Code环境下的Git操作',
                    '查阅官网教程资料，创建vue应用，练习“基础”章节里的所有内容，https://cn.vuejs.org/guide/essentials/application.html，并在其“演练场”中练习相关代码，熟悉Vue3的相关概念并深入了解各个基本知识点，熟悉计算属性，条件渲染，列表渲染，事件处理等基本知识点，掌握相关的示例代码。',
                    '掌握TypeScript的基本语法，熟悉其类型系统，https://www.runoob.com/typescript/ts-tutorial.html,https://www.w3cschool.cn/typescript/typescript-basic-types.html学习视频：https://www.bilibili.com/video/BV14Z4y1u7pi运用变量、表达式，使用选择结构和循环结构语句，定义一个有返回值的带参函数，该函数包含一个参数n，函数功能为计算1到n的奇数和，并返回结果。定义好该函数后，在Vue中调用，并显示结果。',
                   ' 最后，按照官网教程，综合运用数组，计算属性，条件渲染，列表渲染，事件处理，生命周期等知识点，自行编写一个简单的todolist示例项目，发布后压缩上交。简化版todolist代码参考：todolist示例代码.rar完成后发布打包，将dist文件夹的内容压缩后上传，并将解压后的展示网址填在“设置链接”这里。 要求： 可以正常浏览（注意不是压缩文件地址，而是html后缀的网页链接），功能齐全，界面美观！注意：是上传发布打包后的压缩文件，不是上传源文件！不是上传源文件！不是上传源文件！'
                  ],
              iconPath: '/public/icons/1-1.svg',
            },
            {
              title: 'Vue3组件化开发',
              name: 'sub2',
              intro: '熟练掌握Vue3的组件化开发方法，将上一任务的todolist项目进行组件化拆分。并进行打包发布压缩上传，不能在线正常浏览网页效果者不得分目标：掌握Vue3的组件化开发',
              tasks:
                  ['查阅官网资料，https://cn.vuejs.org/guide/components/registration.html，熟悉Vue3组件的定义和使用，并练习相关的示例代码。',
                    '继续巩固Vue3的基本知识点，采用script setup的语法编写vue，深入理解组件的含义和使用方法，将上一任务的todolist项目进行组件化拆分，并加上CSS样式美化界面。在页面中列出定义的子组件目录结构和每个组件的属性和方法。将项目代码同步到你的gitee代码仓库，同时将仓库地址放置在首页顶部的链接中，方便评分者查看源码是否为组件化开发。 参考代码：todomvc--vue.rar完成后发布打包，将dist文件夹的内容压缩后上传，并将解压后的展示网址或者gitee pages部署的网址填在“设置链接”这里。 要求： 可以正常浏览（注意不是压缩文件地址，而是html后缀的网页链接），把git仓库地址放在页面顶部链接，必须是组件化开发，功能齐全，界面美观！ 注意：是上传发布打包后的压缩文件，不是上传源文件！不是上传源文件！不是上传源文件！',
                  ],
              iconPath: '/public/icons/1-2.svg',
            },
            {
              title: 'Vue前端基础刷题',
              name: 'sub3',
              intro: '完成Vue3前端相关知识的刷题练习',
              tasks:
                  ['完成刷题练习',],
              iconPath: '/public/icons/1-3.svg',
            }
            // 可以添加更多子项
          ]},
        { title: 'Vue3的路由与状态管理', name: '2',
          iconPath: '/public/icons/2.svg',
          activeSubName: '', // 用于控制子折叠的激活状态
          subItems: [
            {
              title: 'Vue3路由的使用',
              name: 'sub1',
              intro: '掌握vue-router的使用方法，定义多个页面组件。',
              goals: '熟练掌握前端项目开发环境搭建和Vue项目的搭建，熟悉Vue项目的目录结构',
              tasks:
                  ['参考官网教程https://router.vuejs.org/zh/introduction.html，了解vue-router的使用方法',
                    '为todolist项目添加另外一个首页以及个人简介两个页面组件，为这两个页面添加路由。',
                    '使用vue-router组织todolist项目的页面访问，注意必须使用hash模式，不然上交后将无法访问。 完成后发布打包，将dist文件夹的内容压缩后上传，并将解压后的展示网址填在“设置链接”这里。 要求： 可以正常浏览（注意不是压缩文件地址，而是html后缀的网页链接），功能齐全，界面美观！注意：是上传发布打包后的压缩文件，不是上传源文件！不是上传源文件！不是上传源文件！'
                  ],
              iconPath: '/public/icons/2-1.svg',
            },
            {
              title: '电影列表项目',
              name: 'sub2',
              intro: '复习 Vue 的基本语法，结合组件化开发知识，同时使用Vue路由，完成一个电影列表的项目开发。要求：功能完整，界面美观。请评分者使用浏览器的手机模式浏览评分。目标： * 内容输出指令：插值语法 {{}} | v-html | v-text * 条件指令：v-if | v-else-if | v-else * 列表渲染语法 v-for',
              tasks:
                  ['完成搜索界面初步制作，参考界面如下图。完成后发布打包，在本机自行测试功能，最终结果将在学习任务的最后一节里集成提交',
                    '完成后发布打包，在本机自行测试功能，最终结果将在学习任务的最后一节里集成提交## 作业 一：使用 vue-router 整合作业，（主面）显示频道的电影，掌握 字体图标的使用, 熟悉Vue3的新API',
                    '本任务作业汇总，完成所有任务并测试正确运行后，进行打包发布，将打包后的文件压缩上传，点击文件进行在线解压后，将可访问的链接地址复制到"设置链接"这里上交。记得点击保存。作业布置视频作业 1, 使用 SFC（单文件组件） 制作个人中心页面。'
                  ],
              iconPath: '/public/icons/2-2.svg',
            },
            {
              title: 'Vue自动化测试',
              name: 'sub3',
              intro: '为Vue项目添加vue-test-utils，提供基于vitest的自动化测试服务',
              goals: '掌握在Vue环境下进行自动化测试的工具和方法，掌握组件单元测试的编写',
              tasks:
                  ['修改之前的todolist的vue3项目，引入vue-test-utils环境和vitest环境https://cn.vitest.dev/guide/，掌握单元测试的基本方法，对Vue组件进行单元测试，并将单元测试结果截图，放到你的网页中。同时将结果上传到git仓库中。参考代码：https://gitee.com/sdptsoft/vue3_todolist.git扩展：cypress端到端测试: https://docs.cypress.io/guides/getting-started/installing-cypress了解DevOps开发，学习视频网址：DevOps教学视频',
                    '添加组件的单元测试，对新增一条TODO项目和删除一条TODO项目进行测试，以验证新增和删除是否成功，并将测试代码和测试结果的截图（将两张截图合并到一张jpg图中），保存备交',
                    '添加新的组件的单元测试，对修改TODO项目和全部删除TODO项目进行测试，并将测试代码和测试结果的截图（将两张截图合并到一张jpg图中），保存备交。',
                    '将以上两张截图逐一上传到此处（直接上传图片！不要压缩文件！），图片格式为jpg或png。',
                  ],
              iconPath: '/public/icons/2-3.svg',
            },
            {
              title: '状态管理Pinia',
              name: 'sub4',
              intro: '学习Vue3的状态管理Pinia的使用，完成用户登录的状态管理，同时将上一任务重的自动化测试截图放到其中的页面组件里。',
              tasks:
                  ['参考官方文档，https://pinia.web3doc.top/introduction.html，学习Pinia的基本知识点，在自己的Vue项目中使用Pinia。',
                    '为之前的Todolist项目，添加用户登录功能，并将用户登录信息存储到Pinia的store中。同时将上一任务的自动化测试截图放到其中的一个页面组件里。添加路由守卫功能，不登录的用户不能访问todolist页面。参考代码：Pinia存取用户信息.txt完成后发布打包，将dist文件夹的内容压缩后上传，并将解压后的展示网址填在“设置链接”这里。 要求： 可以正常浏览（注意不是压缩文件地址，而是html后缀的网页链接），把git仓库地址放在页面顶部链接，功能齐全，界面美观！注意：是上传发布打包后的压缩文件，不是上传源文件！不是上传源文件！不是上传源文件！熟悉Vue3的新API'
                  ],
              iconPath: '/public/icons/2-4.svg',
            }
            // 可以添加更多子项
          ]},
        { title: '开源组件的使用与开发', name: '3',
          iconPath: '/public/icons/3.svg',
          activeSubName: '', // 用于控制子折叠的激活状态
          subItems: [
            {
              title: '使用UI组件库',
              name: 'sub1',
              intro: '学习国内最流行的Element Plus组件库，vant组件库等',
              goals: '掌握应用DevOps进行前端开发的工具和手段',
              tasks:
                  ['学习Element Plus组件库的各种组件使用方法，参考官网教程https://element-plus.org/zh-CN/component/button.html，试验每一个组件的使用方法。运用Element Plus完善之前的TodoList项目，使其既能在PC端正常浏览，保存备交。',
                    '学习Vant组件库的各种组件使用方法，参考官网教程https://vant-contrib.gitee.io/vant/#/zh-CN/home，试验每一个组件的使用方法。运用vant完善之前的TodoList项目，使其可以在移动端正常浏览。',
                      '1、融合上面的两个任务，让todolist可以跨端浏览，根据不同终端自动选择显示页面。2、使用vant对课程成绩页面（https://codelover.club/qb/study/43）和个人成绩页面（https://codelover.club/qb/personal/18511）进行重构设计，使这两个页面可以在移动端访问拥有良好的用户体验。3、将以上内容打包发布后，进行压缩上传，并将链接地址粘贴到“设置链接”中。完成后发布打包，将dist文件夹的内容压缩后上传，并将解压后的展示网址填在“设置链接”这里（不允许外部链接）。 要求： 可以正常浏览（注意不是压缩文件地址，而是html后缀的网页链接），把git仓库地址放在页面顶部链接，实现功能齐全，界面美观！注意：是上传发布打包后的压缩文件，不是上传源文件！不是上传源文件！不是上传源文件！'
                  ],
              iconPath: '/public/icons/3-1.svg',
            },
            {
              title: 'common-list开源',
              name: 'sub2',
              intro: '介绍common-list开源组件的开发与使用，尝试自行开发npm组件。',
              tasks:
                  ['了解common-list开源组件的开发与使用，组件地址：https://www.npmjs.com/package/common-list',
                    '1、使用common-list组件，参考数字化成长空间测试版http://test.codelover.club/ 中的用户注册登录、课程列列表和课程学习页面，以及使用网络请求API的用法，开发一个简易版的学习网站。2、完成后发布打包，将dist文件夹的内容压缩后上传，并将解压后的展示网址填在“设置链接”这里（不允许外部链接）。 要求： 可以正常浏览（注意不是压缩文件地址，而是html后缀的网页链接），功能齐全，界面美观！3、本次任务是一个小组任务，要求在首页提供作品讲解视频（视频长度3分钟左右，建议将视频上传到B站https://www.bilibili.com/，在作品首页提供该视频的链接），任务内容则由组长统一提交，将源码放到组长的码云代码仓库中，并在主页上提供代码仓库地址，并写明每个组员的码云用户名，要求组内每一位成员在仓库都必须有相应的代码提交记录。4、若时间允许，将择时举行课堂现场答辩，本任务成绩占比也较大，请各小组务必重视！注意：是上传发布打包后的压缩文件，不是上传源文件！不是上传源文件！不是上传源文件！，熟悉Vue3的新API'
                  ],
              iconPath: '/public/icons/3-2.svg',
            }
            // 可以添加更多子项
          ]},
        { title: '期末作业考核', name: '5',
          iconPath: '/public/icons/4.svg',
          activeSubName: '', // 用于控制子折叠的激活状态
          subItems: [
            {
              title: 'Vue综合项目',
              name: 'sub1',
              intro: '根据前面作业要求，完成一个完整版的todolist，或者电影频道项目。',
              goals: '熟练掌握Vue3.4项目的开发与发布部署流程',
              tasks:
                  ['1、完成一个基于Vue3+vite的完整版博客网站，或者电影网站项目，或者在线课程学习网站（参考数字化成长空间测试版http://test.codelover.club/），或者是自行开发的其他项目（必须是个人开发，采用Vue3.4+vite），后端数据可以用本地json模拟或者使用mock服务器数据，也可以使用公共API（如数字化成长空间测试版）或自己开发的后端API。 参考代码：vue3-blog-master.zip2、完成后发布打包，将dist文件夹的内容压缩后上传，并将解压后的展示网址填在“设置链接”这里（不允许外部链接）。 要求： 可以正常浏览（注意不是压缩文件地址，而是html后缀的网页链接），功能齐全，界面美观！注意：是上传发布打包后的压缩文件，不是上传源文件！不是上传源文件！不是上传源文件！3、本次任务是一个投票任务，同时也是小组任务，要求在首页提供作品讲解视频（视频长度3分钟左右，建议将视频上传到B站https://www.bilibili.com/，在作品首页提供该视频的链接），任务内容则由组长统一提交，将源码放到组长的码云代码仓库中，并在主页上提供代码仓库地址，组内每一位成员要求在仓库都必须有相应的代码提交记录。4、若时间允许，将择时举行课堂现场答辩，本任务成绩占比也较大，请各小组务必重视！',
                  ],
              iconPath: '/public/icons/4-1.svg',
            },
            // 可以添加更多子项
          ]},
      ],
    };
  },


  components: {
    'van-collapse': Collapse,
    'van-collapse-item': CollapseItem,
  },
};
</script>

<style scoped>

#courses {
  box-shadow: grey 0 0 10px;
  border: 1px solid #ccc  ;
  border-radius: 20px;
}

#courses p {
  color: gray;
  /* 设置文本颜色为灰色 */
  margin: 0;
  /* 移除默认的margin */
}

#scorebox {
  background-color: #ffffff;
  /* 设置盒子顶部的外边距，让盒子往下移动 */
  width: 60vw;
  border: 1px solid #ccc;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-left: 8vw;
}

.collapse-box {
  line-height: 2; /* 调整行高 */
}
.score.unrated {
  /* 未评的分数样式 */
  color: red; /* 设置未评分数为红色 */
}
.linkthree {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  z-index: 999; /* 确保链接在其他内容之上 */
  /* 其他样式，如字体、颜色等 */
}
.van-collapse{

}
.van-collapse-item {
  background-color: white;
  border: 1px solid #ebedf0; /* 添加边框以区分每个折叠项 */
  border-radius: 30px;
  margin: 20px 0; /* 给每个折叠项添加外边距 */
  padding: 10px; /* 给折叠项内容添加内边距 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}

.van-collapse-item__content {
  padding: 10px; /* 给折叠项内容添加内边距 */
}

.collapse-box {
  line-height: 2;
}

.score.unrated {
  color: red;
}
.title-with-icon {
  display: flex;
  align-items: center;
}

.icon {
  border-radius: 50px;
  width: 30px; /* SVG 图标大小 */
  height: 30px; /* SVG 图标大小 */
  margin-right: 10px; /* 图标和文本的间距 */
}
.png-icon {
  height: 1rem; /* PNG 图片大小 */
  width: 0.9rem; /* PNG 图片大小 */
}
.sub-item-content {
  align-items: center;
  color: #2d2d2d;
}

.sub-title-with-icon {
  display: flex;
  align-items: center;
}

.sub-item-icon {
  /* SVG 图标大小 */
  width: 20px;
  height: 20px;
  margin-right: 10px; /* 图标和文本的间距 */
}
.task-list {
  list-style-type: disc; /* 添加列表项前的标志 */
  padding-left: 20px; /* 为列表项提供一些左边距 */
  margin-top: 0; /* 移除默认的上边距 */
  margin-bottom: 0; /* 移除默认的下边距 */
}

.task-list li {
  margin-bottom: 5px; /* 为任务点列表项提供一些间距 */
}
</style>


